<template>
  <div>
    <div style="text-align:left">
      患者信息：
      <el-tag>姓名：{{patient.realName}}</el-tag>
      <el-tag>病历号：{{patient.caseNumber}}</el-tag>
      <el-tag>年龄：{{patient.age}}</el-tag>
      <el-tag>性别：{{patient.gender}}</el-tag>
    </div>
    <el-divider></el-divider>
    <div style="font-size:20px;text-align:left">
      <i class="el-icon-document-checked">病历首页</i>
    </div>
    <el-divider></el-divider>
    <el-descriptions title="病案首页"  :column="1" border style="margin-top:20px;width:80%">
      <el-descriptions-item label="主诉" :labelStyle="{'width':'120px'}">
        <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" v-model="medical_record.readme" placeholder="请输入主诉"></el-input>
      </el-descriptions-item>
      <el-descriptions-item label="现病史">
        <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" v-model="medical_record.present" placeholder="请输入现病史"></el-input>
      </el-descriptions-item>
      <el-descriptions-item label="现病治疗情况">
        <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" v-model="medical_record.presentTreat" placeholder="请输入现病治疗情况"></el-input>
      </el-descriptions-item>
      <el-descriptions-item label="既往史">
        <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" v-model="medical_record.history" placeholder="请输入既往史"></el-input>
      </el-descriptions-item>
      <el-descriptions-item label="过敏史">
        <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" v-model="medical_record.allergy" placeholder="请输入过敏史"></el-input>
      </el-descriptions-item>
      <el-descriptions-item label="体格检查">
        <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" v-model="medical_record.physique" placeholder="请输入体格检查信息"></el-input>
      </el-descriptions-item>
      <el-descriptions-item label="诊断">

        <el-table ref="selectDiseaseTable"  :data="medical_record.disease" style="width:100%" @selection-change="deleteDiseaseSelection">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="diseaseCode" label="疾病编码" width="180"></el-table-column>
          <el-table-column prop="diseaseName" label="疾病名称" width="180"></el-table-column>
          <el-table-column prop="diseaseicd" label="国际ICD编码" width="180"></el-table-column>
          <el-table-column prop="diseaseCategory" label="疾病类型" width="180"></el-table-column>
          <el-table-column >
<!--            <template slot="header" slot-scope="scope">-->
            <template #header>
              <el-button type="text" @click="deleteDisease">删除</el-button>
              <el-button type="text" @click="dialogTableVisible = true">增加</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-descriptions-item>
      <el-descriptions-item label="检查/检验建议">
        <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" v-model="medical_record.proposal" placeholder="请输入检查/检验建议"></el-input>
      </el-descriptions-item>
      <el-descriptions-item label="注意事项">
        <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" v-model="medical_record.careful" placeholder="请输入注意事项"></el-input>
      </el-descriptions-item>
    </el-descriptions>

    <div style="text-align:left;margin-top:20px">
      <el-button type="primary" @click="addNewMedicalRecord">保存</el-button>
      <el-button type="primary" @click="clearMedicalRecord()">清空</el-button>
    </div>
    <!-- 疾病选择对话框 -->
<!--    <el-dialog title="添加疾病诊断" :visible.sync="dialogTableVisible">-->
    <el-dialog title="添加疾病诊断" v-model="dialogTableVisible">
      <div>
        <el-tag style="width:20%">疾病名称:</el-tag><el-input style="width:80%" v-model="disease.diseaseName" placeholder="请输入疾病名称"></el-input>
      </div>
      <div>
        <el-tag style="width:20%">疾病助记码:</el-tag><el-input style="width:80%" v-model="disease.diseaseCode" placeholder="请输入疾病助记码"></el-input>
      </div>
      <div>
        <el-tag style="width:20%">疾病ICD:</el-tag><el-input style="width:80%" v-model="disease.diseaseicd" placeholder="请输入疾病国际ICD编码"></el-input>
      </div>
      <div style="float:right">
        <el-button @click="selectDisease">搜索</el-button>
      </div>
      <el-table ref="diseaseTable" :data="search_disease" @selection-change="diseaseSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column type="index" width="55"></el-table-column>
        <el-table-column prop="diseaseName" label="疾病名称" width="150"></el-table-column>
        <el-table-column prop="diseaseCode" label="疾病助记码" width="200"></el-table-column>
        <el-table-column prop="diseaseicd" label="疾病ICD"></el-table-column>
      </el-table>
      <div>
        <el-button type="primary" @click="addSelectionDisease">添加</el-button>
        <el-button type="info" @click="dialogTableVisible = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>

  
</template>

<script>
  import {isNullMessage} from "../../../util/util"
  import qs from 'qs';
  import {getLocalStorage, getSessionStorage} from "@/util/common";
  import {ElMessage} from "element-plus";
  export default {
    data() {
      return {

        temp_disease:[],//临时保存疾病信息
        search_disease:[],//对话框搜索得到的疾病信息
        disease:{
          "diseaseCode":"",
          "diseaseName":"",
          "diseaseicd":""
        },
        dialogTableVisible:false,
        medical_record:{
          id:'',
          readme:'',//主诉
          present:'',//现病史
          presentTreat:'',//现病治疗情况
          history:'',//既往史
          allergy:'',//过敏史
          physique:'',//体格检查
          disease:[],//诊断（对话框选择后的 疾病信息）
          proposal:'',//检查、检验建议          
          careful:'',//注意事项
          registerId:0 //挂号对应的主键值
        },
        patient:{},
      }
    },
    methods:{

      //删除疾病
      deleteDisease:function (){
        //遍历需要2层for
        this.temp_disease.forEach(item=>{
          let index=this.$refs.selectDiseaseTable.data.indexOf(item)
          this.$refs.selectDiseaseTable.data.splice(index,1);
        })


      },
      //选中要删除的疾病
      deleteDiseaseSelection:function (rows){
        this.temp_disease=rows
        console.log(this.temp_disease)
      },

      addSelectionDisease:function (){
        this.dialogTableVisible=false
        //数组合并
        this.medical_record.disease=this.medical_record.disease.concat(this.temp_disease)
        //去重 Set集合
        this.medical_record.disease=Array.from(new Set(this.medical_record.disease))
        console.log(this.medical_record.disease)
        //清除表格的多行的选中
        this.$refs.diseaseTable.clearSelection()
      },
      selectDisease:function ()
      {

         let url='http://localhost:8092/disease/selectdisease'
        this.$axios.post(url,this.disease).then(resp=>{
          this.search_disease=resp.data.result;
          console.log(this.search_disease)
        }).catch(error=>{
          console.log(error)
        })
      },
      diseaseSelectionChange:function (rows){
        console.log(rows)
        this.temp_disease=rows
      },
      //病历保存
      addNewMedicalRecord:function ()
      {

        //判断是否选疾病
        if(this.medical_record.disease.length==0)
        {
          ElMessage({
            type:"info",
            message:'必须要选择疾病！'
          })
          return
        }

        this.medical_record.registerId=this.patient.id
        let url='http://localhost:8092/physicianpatient/insert'
        this.$axios.post(url,this.medical_record).then(resp=>{
          ElMessage({
            type:'success',
            message:'保存病历成功！'
          })
        }).catch(error=>{
          console.log(error)
        })
      }
    },
    mounted() {

      this.patient=getSessionStorage("patient")

    }
  }
</script>